<template>
  <div class="node-panel">
    <div
      class="approve-node"
      :class="'node-' + item.type"
      v-for="item in approveNodes"
      ::key="item.type"
    >
      <div
        class="node-shape"
        :style="item.style"
        @mousedown.native="dragNode(item)"
      ></div>
      <div class="node-label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { approveNodes } from './config'
import { type HtmlNodeConfig } from './type'

const props = defineProps({
  lf: Object,
})
const { lf } = props

const dragNode = (item: HtmlNodeConfig) => {
  lf!.dnd.startDrag({
    type: item.type,
    text: item.label,
  })
}
</script>
